<template>
    <div class="order_container">
      <div class="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-card class="box-card">
        <el-row :gutter="0">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-input placeholder="查询订单" clearable v-model="queryInfo.query" @clear="getOrderList">
              <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
            </el-input>
          </div></el-col>
        </el-row>
        <!--订单列表区-->
        <el-table :data="orderList" style="width: 100%" border stripe>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="订单编号" prop="order_number"></el-table-column>
          <el-table-column label="订单价格" prop="order_price" width="100px"></el-table-column>
          <el-table-column label="是否付款" width="100px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.pay_status==='0'" type="danger">未付款</el-tag>
              <el-tag v-else type="success">已付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否发货" prop="is_send" width="100px"></el-table-column>
          <el-table-column label="下单时间" width="150px">
            <template slot-scope="scope">
              {{scope.row.create_time|dataFormat}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content=" 编辑 " placement="top" :enterable="false">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="进度" placement="top" :enterable="false">
                <el-button type="success" size="mini" icon="el-icon-location" @click="showProgressBox(scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination background layout="total,sizes,prev, pager, next" align="left" :page-size="queryInfo.pagesize" :total="total"
                       @current-change="pagenumChange" :current-page="queryInfo.pagenum" @size-change="handleSizeChange" :page-sizes="[5,10,15,30,60,120,240,480]">
        </el-pagination>
        <!--修改地址对话框-->
        <el-dialog title="修改地址" align="left" :visible.sync="addressVisible" width="45%" @close="addressFormReset">
          <el-form :model="addressForm" :rules="addressFormRules" ref="editFormRef" label-width="100px">
            <el-form-item label="省市区/县" prop="address1">
              <el-cascader v-model="addressForm.address1" :options="citydata" :props="cateProps" @change="cascaderChange"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="address2">
              <el-input v-model="addressForm.address2"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="addressVisible = false">取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </span>
        </el-dialog>
        <!--物流进度-->
        <el-dialog title="物流进度" align="left" :visible.sync="ProgressVisible" width="45%">
          <!--时间线组件-->
          <el-timeline :reverse="true">
            <el-timeline-item v-for="(activity, index) in ProgressInfo" :key="index" :timestamp="activity.time">
              {{activity.context}}
            </el-timeline-item>
          </el-timeline>
        </el-dialog>
      </el-card>
    </div>
</template>

<script>
  import connector from '../../base/interface.js';
  /*导入省市区/县*/
  import citydata from './citydata.js';
    export default {
      name: "Order",
      data(){
        return{
          /*查询订单数据列表的查询对象*/
          queryInfo:{query:'',pagenum:1,pagesize:10},
          /*订单列表*/
          orderList:[],
          /*总条数*/
          total:0,
          addressVisible:false,
          ProgressVisible:false,
          /*修改地址的表单*/
          addressForm:{address1:[],address2:''},
          /*修改地址表单验证对象*/
          addressFormRules:{
            address1:[{required:true,message:'请选择省市区/县', trigger: 'blur'}],
            address2:[{required:true,message:'请输入详细地址', trigger: 'blur'}],
          },
          /*省市区/县*/
          citydata:citydata,
          cateProps:{expandTrigger:'hover', emitPath:true},
          /*物流进度信息对象*/
          ProgressInfo:[]
        }
      },
      methods:{
        getOrderList(){
          /*获取 订单数据列表*/
          connector.getOrders(this.queryInfo).then(res=>{
            var {data:data}=res;
            this.total=data.data.total;
            this.orderList=data.data.goods;
          });
        },
        showEditDialog(row){
          this.addressVisible=true
        },
        pagenumChange(page){
          /*页码值改变*/
          this.queryInfo.pagenum=page;
          this.getOrderList();
        },
        handleSizeChange(newSize){
          /*每页显示的条数改变*/
          this.queryInfo.pagesize=newSize;
          this.getOrderList();
        },
        cascaderChange(){
          /*级联选择器触发*/

        },
        addressFormReset(){
          /*关闭对话框触发*/
          this.$refs.editFormRef.resetFields();
        },
        showProgressBox(){
          /*点击查看进度触发*/
          connector.getKuaidiById().then(res=>{
            var {data:data}=res;
            this.ProgressInfo=data.data;
            this.ProgressVisible=true;
          });
        }
      },
      created() {
        this.getOrderList();

      }
    }
</script>

<style lang="scss" scoped>
.order_container{

}
</style>
